<template>
    <div class="cartList" v-for="(item,index) in cartList" :key="index">
        <input type="checkbox" v-model="item.checked" @change="btn">
        <img :src="item.img" alt="">
        <section>
            <p>{{item.name}}</p>
            <div class="foot">
                <span style="color:red">￥{{item.price}}</span>
                <ul>
                    <li @click="item.num<=1?1:item.num--">-</li>
                    <li>{{item.num}}</li>
                    <li @click="item.num++">+</li>
                </ul>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    emits:['btnchange'], // 注册一下，抛出的事件名称
    props:{
      cartList: Array
    },
    setup(props,ctx) { 
      const btn = ()=>{
        ctx.emit('btnchange');
      }
      return {
          btn
      }
    }
}
</script>
<style lang="scss" scoped>
 .cartList{
   display: flex;
   align-items: center;
   padding:10px;
   margin-bottom: 10px;
   background: #fff;
   img{
       width: 100px;
       margin: 0 10px;
    }
    section{
      flex: 1;
    }
    .foot{
      display: flex;
      align-items: center;
      justify-content: space-between;
      li{
          display: inline-block;
          padding: 4px 10px;
          background: #ccc;
          margin-right: 5px;
      }
    }
 }
</style>